<template>
	<view class="pageview"></view>
</template>

<script>
	let view = null;
	var wv; //计划创建的webview
	export default {
		data() {
			return {
				webUrl: '',
				nvMask: null,
				nvImageMenu: null,
				webViewObj:null,
				canBack: false,
			}
		},
		onBackPress(e) {
			if (e.from === 'navigateBack') {    
				return false  
			}  
			if (this.webViewObj && this.canBack) {  
				this.webViewObj.back()  
				return true  
			}
			// if (wv && this.canBack) {
			// 	wv.back();
			// 	return true;
			// }
			// return false;
		},

		onLoad() {
			let query = this.$Route.query
			this.webUrl = query.url
			this.createWeb()
			setTimeout(() => {
				this.createBtn()
			}, 200)
			console.log(uni.getSystemInfoSync().safeArea.bottom - uni.getSystemInfoSync().safeArea.height);
		},
		onUnload() {
			view && view.close();
		},
		methods: {
			createWeb() {
				if (!this.webUrl) return
				this.webViewObj = plus.webview.create('', "webview", {
					plusrequire: "none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
					'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突 
					top: uni.getSystemInfoSync().statusBarHeight, //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
					bottom:'0'
				})
				this.webViewObj.loadURL(this.webUrl)  
				var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()
				currentWebview.append(this.webViewObj); //一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
				this.createShare()
				
				const self = this  
				this.webViewObj.addEventListener('loaded', e => {  
					this.webViewObj.canBack(e => {  
					  self.canBack = e.canBack   
					})  
				})
			},
			createBtn() {
				let sys = uni.$u.sys()
				view = new plus.nativeObj.View('capsule', {
					top: sys.statusBarHeight + 7 + 'px',
					left: sys.screenWidth - 5 - 85 + 'px',
					height: '30px',
					width: '85px'
				});
				view.draw([{
						tag: 'rect',
						rectStyles: {
							color: '#C9C9C9',
							radius: '15px'
						},
						position: {
							top: '0',
							left: '0',
							width: '85px',
							height: '30px'
						}
					},
					{
						tag: 'rect',
						rectStyles: {
							color: 'rgba(255,255,255,1)',
							radius: '14px'
						},
						position: {
							top: '1px',
							left: '1px',
							width: '83px',
							height: '28px'
						}
					},
					{
						tag: 'img',
						src: '/static/icon/webgengduo.png',
						position: {
							top: '12px',
							left: '11px',
							width: '20px',
							height: '6px'
						}
					},
					{
						tag: 'rect',
						rectStyles: {
							color: '#C9C9C9'
						},
						position: {
							top: '4px',
							left: '42px',
							width: '1px',
							height: '22px'
						}
					},
					{
						tag: 'img',
						src: '/static/icon/webfanhui.png',
						position: {
							top: '6px',
							left: '55px',
							width: '18px',
							height: '18px'
						}
					},
				]);
				view.show();
			
				view.addEventListener("click", this.onClick, false);
			},
			createShare() {
				var strShareUrl = this.webUrl
				var screenWidth = plus.screen.resolutionWidth
				var margin = 25,
					iconWidth = 55,
					icontextSpace = 5,
					textHeight = 12
				var left1 = margin / 360 * screenWidth
				var iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距，再减去4个图标的宽度，就是3个同行图标的间距
				if (iconSpace <= 5) { //屏幕过窄时，缩小边距和图标大小，再算一次
					margin = 15
					iconWidth = 40
					left1 = margin / 360 * screenWidth
					iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距，再减去4个图标的宽度，就是3个同行图标的间距
				}
				var left2 = left1 + iconWidth + iconSpace
				var left3 = left1 + (iconWidth + iconSpace) * 2
				var left4 = left1 + (iconWidth + iconSpace) * 3
				var top1 = left1
				var top2 = top1 + iconWidth + icontextSpace + textHeight + left1
				this.nvMask = new plus.nativeObj.View("nvMask", { //先创建遮罩层
					top: '0px',
					left: '0px',
					height: '100%',
					width: '100%',
					backgroundColor: 'rgba(0,0,0,0.2)'
				});
				this.nvMask.addEventListener("click", () => { //处理遮罩层点击
					this.nvMask.hide();
					this.nvImageMenu.hide();
				})
				this.nvImageMenu = new plus.nativeObj.View("nvImageMenu", { //创建底部图标菜单
					bottom: '0px',
					left: '0px',
					height: '264px',
					width: '100%',
					backgroundColor: 'rgb(255,255,255)'
				});
				//绘制底部图标菜单的内容
				this.nvImageMenu.draw([{
						tag: 'rect', //菜单顶部的分割灰线
						color: '#e7e7e7',
						position: {
							top: '0px',
							height: '1px'
						}
					},
					{
						tag: 'font',
						id: 'sharecancel', //底部取消按钮的文字
						text: getApp().$t("common.cancelText"),
						textStyles: {
							size: '14px'
						},
						position: {
							bottom: '0px',
							height: '44px'
						}
					},
					{
						tag: 'rect', //底部取消按钮的顶部边线
						color: '#e7e7e7',
						position: {
							bottom: '45px',
							height: '1px'
						}
					},
					// {
					// 	tag: 'img',
					// 	id: 'imgcopyurl',
					// 	src: '/static/icon/webcopy.png',
					// 	position: {
					// 		top: top1,
					// 		left: left1,
					// 		width: iconWidth,
					// 		height: iconWidth
					// 	}
					// },
					// {
					// 	tag: 'font',
					// 	id: 'fontcopyurl',
					// 	text: getApp().$t("chat.msg.feature.copy"),
					// 	textStyles: {
					// 		size: textHeight
					// 	},
					// 	position: {
					// 		top: top1 + iconWidth + icontextSpace,
					// 		left: left1,
					// 		width: iconWidth,
					// 		height: textHeight
					// 	}
					// },
					{
						tag: 'img',
						id: 'imgshuaxin',
						src: '/static/icon/webshuaxin.png',
						position: {
							top: top1,
							left: left1,
							width: iconWidth,
							height: iconWidth
						}
					},
					{
						tag: 'font',
						id: 'fontshuaxin',
						text: getApp().$t("common.refresh"),
						textStyles: {
							size: textHeight
						},
						position: {
							top: top1 + iconWidth + icontextSpace,
							left: left1,
							width: iconWidth,
							height: textHeight
						}
					},
					// {
					// 	tag: 'img',
					// 	id: 'imgshare',
					// 	src: '/static/icon/webfenxiang.png',
					// 	position: {
					// 		top: top1,
					// 		left: left3,
					// 		width: iconWidth,
					// 		height: iconWidth
					// 	}
					// },
					// {
					// 	tag: 'font',
					// 	id: 'fontshare',
					// 	text: getApp().$t("common.share"),
					// 	textStyles: {
					// 		size: textHeight
					// 	},
					// 	position: {
					// 		top: top1 + iconWidth + icontextSpace,
					// 		left: left3,
					// 		width: iconWidth,
					// 		height: textHeight
					// 	}
					// },
					//如果想要增加更多按钮，请在这里继续添加，第二列还有2个空位
				])
				this.nvImageMenu.addEventListener("click", (e) => { //处理底部图标菜单的点击事件，根据点击位置触发不同的逻辑
					if (e.screenY > plus.screen.resolutionHeight - 44) { //点击了底部取消按钮
						this.nvMask.hide();
						this.nvImageMenu.hide();
					} else if (e.clientX < 5 || e.clientX > screenWidth - 5 || e.clientY < 5) {
						//屏幕左右边缘5像素及菜单顶部5像素不处理点击
					} else { //点击了图标按钮
						var iClickIndex = -1 //点击的图标按钮序号，第一个图标按钮的index为0
						var iRow = e.clientY < (top2 - (left1 / 2)) ? 0 : 1
						var iCol = -1
						if (e.clientX < (left2 - (iconSpace / 2))) {
							iCol = 0
						} else if (e.clientX < (left3 - (iconSpace / 2))) {
							iCol = 1
						} else if (e.clientX < (left4 - (iconSpace / 2))) {
							iCol = 2
						} else {
							iCol = 3
						}
						if (iRow == 0) {
							iClickIndex = iCol
						} else {
							iClickIndex = iCol + 4
						}
						if (iClickIndex >= 0 && iClickIndex <= 5) {
							var strProvider = "",
								strScene = ""
							switch (iClickIndex) {
								case 0:
									this.webViewObj.loadURL(this.webUrl)
									this.nvMask.hide();
									this.nvImageMenu.hide();
									// uni.setClipboardData({
									// 	data: strShareUrl,
									// 	complete() {
									// 		uni.showToast({
									// 			title: getApp().$t("tost.title.copyOk"),
									// 			icon:'none'
									// 		})
									// 	}
									// })
									// this.nvMask.hide();
									// this.nvImageMenu.hide();
									break;
								case 1:
									//    this.webViewObj.loadURL(this.webUrl)
									// this.nvMask.hide();
									// this.nvImageMenu.hide();
									break;
								case 2:
									// plus.share.sendWithSystem({
									// 	content: strShareUrl,
									// })
									// this.nvMask.hide();
									// this.nvImageMenu.hide();
									break;
							}
						}
					}
				})
			},
			onClick(e) {
				if (e.clientX < 42) {
					this.nvMask.show()
					this.nvImageMenu.show() //5+应支持从底部向上弹出的动画
				} else if (e.clientX > 42) {
					this.$Router.back()
				}
			}
		}
	};
</script>
<style scoped lang="scss">
</style>